<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">

    <ui:composition template="/template.xhtml">
        <ui:define name="title">
            <h:outputText value="Novo Pedido"></h:outputText>
        </ui:define>
        <ui:define name="body">
            <fieldset>
                <h:form id="pedidoForm">
                    <legend align="left"><h:outputText value="#{pedidoController.clientePedido.label}"/></legend>
                    <h:panelGroup id="groupPedidoForm" rendered="#{pedidoController.clientePedido ne null}">
                        <div class="row">
                            <div class="col-md-2" align="left">
                                <h:outputLabel value="Data:" for="dataPed" />
                            </div>
                            <div class="col-md-5" align="left">
                                <p:inputText id="dataPed" value="#{pedidoController.selected.dataPed}" readonly="true" required="true">
                                    <f:convertDateTime pattern="dd/MM/yyyy" />
                                </p:inputText>
                                <p:message for="dataPed" display="icon"/>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-2" align="left">
                                <h:outputLabel value="Endereço entrega:" for="enderecoEntrega" />
                            </div>
                            <div class="col-md-5" align="left">
                                <h:selectOneMenu id="enderecoEntrega" value="#{pedidoController.selected.enderecoEntrega}" title="#{bundle.CreatePedidoTitle_enderecoEntrega}" required="true" requiredMessage="Campo obrigatório">
                                    <f:selectItems value="#{pedidoController.enderecosClientePedidoSelect}"/>
                                </h:selectOneMenu>
                                <p:message for="enderecoEntrega" display="icon"/>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-2" align="left">
                                <h:outputLabel value="Telefone de contato:" for="telefoneEntrega" />
                            </div>
                            <div class="col-md-5" align="left">
                                <h:selectOneMenu id="telefoneEntrega" value="#{pedidoController.selected.telefoneEntrega}" required="true" requiredMessage="Campo obrigatório">
                                    <f:selectItems value="#{pedidoController.telefonesClientePedidoSelect}"/>
                                </h:selectOneMenu>
                                <p:message for="telefoneEntrega" display="icon"/>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-2" align="left">
                                <h:outputLabel value="Produtos selecionados:"/>
                            </div>
                            <div class="col-md-5" align="left">
                                <h:panelGroup>
                                    <table >
                                        <tr>
                                            <ui:repeat value="#{pedidoController.produtosSelecionados}" var="prod">
                                                <td>
                                                    <h:panelGrid columns="2">
                                                        <h:outputText value="Imagem"/>
                                                        <h:graphicImage library="img" name="#{prod.imagem}" width="32" height="32"/>

                                                        <h:outputText value="Produto:"/>
                                                        <h:outputText value="#{prod.prodNome}"/>

                                                        <h:outputText value="Preço:"/>
                                                        <h:outputText value="#{prod.preco}">
                                                            <f:convertNumber type="currency" locale="pt_BR"/>
                                                        </h:outputText>

                                                        <h:outputText value="Quantidade:"/>
                                                        <p:spinner value="#{prod.qtdade}" min="0" >
                                                            <p:ajax event="change" update="qtd :pedidoForm:total"/>
                                                        </p:spinner>

                                                        <h:outputText value="Total:"/>
                                                        <h:outputText value="#{prod.preco * prod.qtdade}" id="qtd">
                                                            <f:convertNumber type="currency" locale="pt_BR"/>
                                                        </h:outputText>
                                                    </h:panelGrid>
                                                </td>
                                                <td>
                                                    <p:spacer width="10" height="10"/>
                                                </td>
                                            </ui:repeat>
                                        </tr>
                                    </table>
                                </h:panelGroup>
                            </div>
                        </div>
                        <div class="row" style="margin-top: 5px;">
                            <div class="col-md-2" align="left">
                                <h:outputLabel value="Desconto:"/>
                            </div>
                            <div class="col-md-5" align="left">
                                <p:inputText id="desconto" value="#{pedidoController.selected.desconto}" required="true" requiredMessage="Campo obrigatório" onkeypress="return(MascaraMoeda(this, '.', ',', event))">
                                    <f:converter converterId="moneyConverter"/>
                                    <p:ajax event="blur" update="total"/>
                                </p:inputText>
                                <p:message for="desconto" display="icon"/>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-2" align="left">
                                <h:outputLabel value="Valor pedido:"/>
                            </div>
                            <div class="col-md-5" align="left">
                                <h:outputText value="#{pedidoController.valorTotalPedido}" id="total">
                                    <f:convertNumber type="currency" locale="pt_BR"/>
                                </h:outputText>
                                <p:message for="total" display="icon"/>
                            </div>
                        </div>
                        <h:panelGrid columns="3" style="margin-top: 10px;">
                            <h:commandButton styleClass="btn btn-mini btn-primary" action="#{pedidoController.create}" value="Salva pedido" />
                            <p:spacer width="10" height="10"/>
                            <h:commandButton styleClass="btn btn-mini btn-primary" action="#{pedidoController.prepareList}" value="Cancelar" immediate="true"/>
                        </h:panelGrid>

                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <td colspan="5">
                                        <h:outputText value="Produtos cadastrados" style="font-size: large;"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td align="left"><h:outputText value="Código"/></td>
                                    <td align="left"><h:outputText value="Nome"/></td>
                                    <td align="left"><h:outputText value="Preço"/></td>
                                    <td align="left"><h:outputText value="Imagem"/></td>
                                    <td></td>
                                </tr>
                            </thead>
                            <tbody>
                                <ui:repeat value="#{produtoController.items}" var="item">
                                    <tr>
                                        <td align="left"><h:outputText value="#{item.id}"/></td>
                                        <td align="left"> <h:outputText value="#{item.prodNome}"/></td>
                                        <td align="left">
                                            <h:outputText value="#{item.preco}">
                                                <f:convertNumber type="currency" locale="pt_BR"/>
                                            </h:outputText>
                                        </td>
                                        <td align="left"><h:graphicImage library="img" name="#{item.imagem}"/></td>
                                        <td align="left"><h:commandLink action="#{pedidoController.addProduto(item)}" value="Adicionar"/></td>
                                    </tr>
                                </ui:repeat>
                            </tbody>
                        </table>
                    </h:panelGroup>
                    <h:panelGroup id="groupPedidoAvisoForm" rendered="#{pedidoController.clientePedido eq null}">
                        <h:outputText value="Selecione um cliente para fazer um pedido"/>
                        <br/>
                        <h:commandButton styleClass="btn btn-mini btn-primary" action="/cadastro/cliente/List.xhtml" value="Selecionar cliente"/><br/>
                    </h:panelGroup>
                </h:form>
            </fieldset>
        </ui:define>
    </ui:composition>

</html>
